import React, { useState, useEffect } from 'react'
import { AddMemberWrapper, AddListWrapper, AddBtnWrapper } from "./styleAddMember"
import Navbar from "@/components/myComponents/navBar/Navbar"
import Icon from "@/components/icon/Icon"
import Alert from "@/components/myComponents/alert/Alert"
import axios from 'axios'

const AddMember = () => {
    const [relateValue, setRelateValue] = useState("")
    const [relateState, setRelateState] = useState(false)
    const [relateData] = useState(["本人", "父母", "妻子", "姐妹", "兄弟"])
    const clickHandlerRelate = (e) => {
        setRelateState(!relateState);
        setRelateValue(e.target.textContent);
    }

    const [sexValue, setSexValue] = useState("")
    const [sexState, setSexState] = useState(false)
    const [sexData] = useState(["男", "女"])
    const clickHandlerSex = (e) => {
        setSexState(!sexState);
        setSexValue(e.target.textContent);
    }

    const changeValue = () => {

    }

    const [userInfo, setUserInfo] = useState([])
    const list = document.querySelectorAll("input");
    const listKeys = ["id", "name", "number", "sex", "age", "birthday", "telephone", "adress", "relation"]
    const addMemberBtn = () => {
        const useinfo = Array.from(list).reduce((value, item) => {
            value.push(item.value);
            return value;
        }, [])
        const Index = useinfo.indexOf("");
        switch (Index) {
            case 0:
                console.log(0);
                break;
            case 1:
                console.log(1);
                break;
            case 2:
                console.log(2);
                break;
            case 3:
                console.log(3);
                break;
            case 4:
                console.log(4);
                break;
            case 5:
                console.log(5);
                break;
            default:
                console.log(1);
                var result = {};
                for (var i = 0; i < listKeys.length; i++) {
                    if (useinfo) {
                        if (listKeys[i] === "id") result[listKeys[i]] = new Date().getTime()
                        else result[listKeys[i]] = useinfo[i - 1];
                    } else {
                        result[listKeys[i][0]] = listKeys[i][1];
                    }
                }
                setUserInfo(result);
        }
    }

    useEffect(() => {
        if (userInfo.length === 0) return
        console.log(userInfo);
        axios.post('http://localhost:9000/user', userInfo)
            .then(() => {
                Array.from(list).map((item) => {
                    item.value = ""
                })
            })
            .catch(() => {
                console.log("default");
            })
    }, [userInfo])

    return (
        <>
            <Alert
                data={sexData}
                alertState={sexState}
                onClick={clickHandlerSex}
                title="请选择性别"
                footer="取消"
            ></Alert>
            <Alert
                data={relateData}
                alertState={relateState}
                onClick={clickHandlerRelate}
                title="请选择和您的关系"
                footer="取消"
            ></Alert>
            <AddMemberWrapper>
                <Navbar
                    back={true}
                    title="家庭成员管理"
                >
                </Navbar>
                <AddListWrapper>
                    <div>
                        <div className="add_list_left">
                            真实姓名
                            <span>*</span>
                        </div>
                        <div className="add_list_right">
                            <input type="text" placeholder="请填写你的真实姓名" />
                        </div>
                    </div>
                </AddListWrapper>
                <AddListWrapper>
                    <div>
                        <div className="add_list_left">
                            身份证号
                            <span>*</span>
                        </div>
                        <div className="add_list_right">
                            <input type="text" placeholder="请填写你的身份证号" />
                        </div>
                    </div>
                </AddListWrapper>
                <AddListWrapper>
                    <div onClick={clickHandlerSex}>
                        <div className="add_list_left">
                            性别
                            <span>*</span>
                        </div>
                        <div className="add_list_right">
                            <input type="text" placeholder="请选择你的性别" value={sexValue} onChange={changeValue} />
                            <Icon
                                name="arrowRightLine"
                                color="#cccccc"
                                size='.2rem'
                            ></Icon>
                        </div>
                    </div>
                </AddListWrapper>
                <AddListWrapper>
                    <div>
                        <div className="add_list_left">
                            年龄
                            <span>*</span>
                        </div>
                        <div className="add_list_right">
                            <input type="text" placeholder="请输入你的年龄" />
                        </div>
                    </div>
                </AddListWrapper>
                <AddListWrapper>
                    <div>
                        <div className="add_list_left">
                            出生日期
                            <span>*</span>
                        </div>
                        <div className="add_list_right">
                            <input type="text" placeholder="请输入你的出生日期" />
                        </div>
                    </div>
                </AddListWrapper>
                <AddListWrapper>
                    <div>
                        <div className="add_list_left">
                            联系电话
                            <span>*</span>
                        </div>
                        <div className="add_list_right">
                            <input type="text" placeholder="请填写你的联系电话" />
                        </div>
                    </div>
                </AddListWrapper>
                <AddListWrapper>
                    <div>
                        <div className="add_list_left">
                            现居地
                        </div>
                        <div className="add_list_right">
                            <input type="text" placeholder="请填写现居地" />
                        </div>
                    </div>
                </AddListWrapper>
                <AddListWrapper>
                    <div onClick={clickHandlerRelate}>
                        <div className="add_list_left">
                            与本人关系
                        </div>
                        <div className="add_list_right">
                            <input type="text" value={relateValue} onChange={changeValue} placeholder="请选择和您的关系" />
                            <Icon
                                name="arrowRightLine"
                                color="#cccccc"
                                size='.2rem'
                            ></Icon>
                        </div>
                    </div>
                </AddListWrapper>
            </AddMemberWrapper>
            <AddBtnWrapper>
                <div onClick={addMemberBtn}>保存</div>
            </AddBtnWrapper>
        </>
    );
}

export default AddMember;